<!--suppress JSAnnotator -->
<div id="workshop-app" style="display: none">
    <!-- 顶部卡片导航 - 整行显示 -->
    <div class="full-row-cards">
        <div class="cards-container">
            <div v-for="(card, index) in cards" :key="index"
                 class="status-card"
                 :class="'bg-' + card.color"
            @click="showDialog(card.type)">
            <div class="inner">
                <h3>@{{ card.count }}</h3>
                <p>@{{ card.title }}</p>
            </div>
            <div class="icon">
                <i class="fa fa-car"></i>
            </div>
        </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-filter-row">
        <div class="search-box">
            <div class="input-group">
                <input type="text" class="form-control"
                       v-model="searchQuery"
                       placeholder="输入车牌号/车主姓名搜索">
                <span class="input-group-btn">
                        <button class="btn btn-default" type="button" @click="search">
                            <i class="fa fa-search"></i>
                    </button>
                    </span>
            </div>
        </div>

        <div class="workshop-dropdown" v-if="permission_status">
            <select class="form-control" v-model="selectedWorkshop" @change="changeWorkshop">
            <option v-for="(workshop, index) in workshops"
                    :key="index"
                    :value="workshop.id">
                @{{ workshop.title }}
            </option>
            </select>
        </div>
    </div>

    <div class="workflow-system">
        <div class="scrollable-modules">
            <div class="module-group">
                <div class=" module-pending">
                    <h4>待维修 <span class="count-badge">@{{ counts.pending }}</span></h4>
                    <div class="process-list-container">
                        <div class="create-work-order-box">
                            <el-button type="primary" @click="showCreateDialog = true">添加工单</el-button>
                        </div>
                        <ul class="process-list">
                            <li class="process-item"
                                v-for="(process, index) in processes.pending"
                                :key="'pending-'+index"
                            @mouseenter="process.showButtons = true"
                            @mouseleave="process.showButtons = false">
                            <div class="process-content">
                                <div class="process-code-parts">
                                    <div class="process-code">编号: @{{ process.order_sn }}</div>
                                    <div class="process-parts">@{{ process.parts }}</div>
                                </div>
                                <div class="process-plate">@{{ process.car_number }}</div>
                                <div class="process-vehicle">@{{ process.brand_title }} | @{{ process.car_title }} | @{{ process.user_name }}</div>
                                <div class="process-dates">
                                    <div class="process-date">开单日期: @{{ process.opening_at }}</div>
                                    <div class="process-date">预交日期: @{{ process.pre_delivery_at }}</div>
                                </div>
                            </div>
                            <div class="action-buttons" v-if="process.showButtons">
                                <button class="btn btn-xs btn-info" @click="showDetail(process)">详情</button>
                                <button class="btn btn-xs btn-primary" @click="assignWork(process)">派工</button>
                                {{--<button class="btn btn-xs btn-success" @click="advanceProcess(process)">推进</button>--}}
                            </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 双模块组 -->
            <div class="module-group" v-for="module in modules" :key="module.name">
                <div class="process-module">
                    <h4>@{{ module.title }} <span class="count-badge">@{{ counts[module.name] }}</span></h4>
                    <div class="process-list-container metal-list">
                        <ul class="process-list">
                            <li class="process-item metal-item"
                                v-for="(process, index) in processes[module.name]"
                                :key="'active-'+module.name+'-'+index"
                            @mouseenter="process.showButtons = true"
                            @mouseleave="process.showButtons = false">
                            <div class="process-content">
                                <div class="process-left">
                                    <div class="process-code-parts">
                                        <div class="process-code">编号 ：@{{ process.order_sn }} <span class="is-rework-font" v-if="process.is_rework">[内返]</span><span class="is-rework-font" v-if="process.is_stop">[中断]</span></div>
                                        <div class="process-parts">@{{ process.parts }}</div>
                                    </div>
                                </div>
                                <div class="process-right">
                                    <div class="process-content-left">
                                        <div class="process-manager-font">@{{ process.manager }}</div>
                                    </div>
                                    <div class="process-content-right">
                                        <div class="process-plate">@{{ process.car_number }}</div>
                                        <div class="process-vehicle">@{{ process.brand_title }} | @{{ process.car_title }} | @{{ process.user_name }}</div>
                                        <div class="process-dates">
                                            <div class="waiting-time">开工: @{{ process.wait_time }}</div>
                                            <div class="process-date">开单日期: @{{ process.opening_at }}</div>
                                            <div class="process-date">预交日期: @{{ process.pre_delivery_at }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="action-buttons" v-if="process.showButtons">
                                <button class="btn btn-xs btn-warning" @click="moveBack(process)">后退</button>
                                <button class="btn btn-xs btn-info" @click="showDetail(process)">详情</button>
                                <button class="btn btn-xs btn-danger" v-if="!process.is_stop" @click="reworkProcess(process)">返工</button>
                                <button class="btn btn-xs btn-primary" @click="assignWork(process)">派工</button>
                                <button class="btn btn-xs btn-dark" v-if="!process.is_stop" @click="interruptProcess(process)">中断</button>
                                <button class="btn btn-xs btn-dark" v-if="process.is_stop" @click="stopContinue(process)">继续</button>
                                {{--<button class="btn btn-xs btn-success" @click="advanceProcess(process)">推进</button>--}}
                            </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="process-module">
                    <h4>等待@{{ module.title }} <span class="count-badge">@{{ counts['waiting_'+module.name] }}</span>
                    </h4>
                    <div class="process-list-container metal-list">
                        <ul class="process-list">
                            <!-- 结构与钣金拆解相同 -->
                            <li class="process-item metal-item"
                                v-for="(process, index) in processes['waiting_'+module.name]"
                                :key="'waiting-'+module.name+'-'+index"
                            @mouseenter="process.showButtons = true"
                            @mouseleave="process.showButtons = false">
                            <div class="process-content">
                                <div class="process-left">
                                </div>
                                <div class="process-right">
                                    <div class="process-code-parts">
                                        <div class="process-code">编号@{{ process.order_sn }}<span class="is-rework-font" v-if="process.is_stop">[中断]</span></div>
                                        <div class="process-parts">@{{ process.parts }}</div>
                                    </div>
                                    <div class="process-plate">@{{ process.car_number }}</div>
                                    <div class="process-vehicle">@{{ process.brand_title }} | @{{ process.car_title }} | @{{ process.user_name }}</div>
                                    <div class="process-dates">
                                        <div class="waiting-time">等待: @{{ process.wait_time }}</div>
                                        <div class="process-date">开单日期: @{{ process.opening_at }}</div>
                                        <div class="process-date">预交日期: @{{ process.pre_delivery_at }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="action-buttons" v-if="process.showButtons">
                                <button class="btn btn-xs btn-warning" @click="moveBack(process)">后退</button>
                                <button class="btn btn-xs btn-info" @click="showDetail(process)">详情</button>
                                <button class="btn btn-xs btn-danger" v-if="!process.is_stop" @click="reworkProcess(process)">返工</button>
                                <button class="btn btn-xs btn-primary" @click="assignWork(process)">派工</button>
                                <button class="btn btn-xs btn-dark" v-if="!process.is_stop" @click="interruptProcess(process)">中断</button>
                                <button class="btn btn-xs btn-dark" v-if="process.is_stop" @click="stopContinue(process)">继续</button>
                                {{--<button class="btn btn-xs btn-success" @click="advanceProcess(process)">推进</button>--}}
                            </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="module-group">
                <!-- 单模块 - 洗车质检 -->
                <div class="module-inspection">
                    <div class="module-header">
                        <h4>洗车质检 <span class="count-badge">@{{ counts.inspection }}</span></h4>
                    </div>
                    <div class="process-container">
                        <ul class="process-list-container">
                            <li class="process-item"
                                v-for="(process, index) in processes.inspection"
                                :key="'inspection-'+index"
                            @mouseenter="process.showButtons = true"
                            @mouseleave="process.showButtons = false">
                            <div class="process-content">
                                <div class="process-left">
                                    <div class="process-code-parts">
                                        <div class="process-code">编号
                                            ：@{{ process.order_sn }}</div>
                                        <div class="process-parts">@{{ process.parts }}</div>
                                    </div>
                                </div>
                                <div class="process-right">
                                    <div class="process-content-left">
                                        <div class="waiting-time">等待:@{{ process.wait_time }}</div>
                                    </div>
                                    <div class="process-content-right">
                                        <div class="process-plate">@{{ process.car_number }}</div>
                                        <div class="process-vehicle">@{{ process.brand_title }} | @{{ process.car_title }} | @{{ process.service_advisor_name }}</div>
                                        <div class="process-dates">
                                            <div class="waiting-time">开工: @{{ process.wait_time }}</div>
                                            <div class="process-date">开单日期: @{{ process.opening_at }}</div>
                                            <div class="process-date">预交日期: @{{ process.pre_delivery_at }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="action-buttons" v-show="process.showButtons">
                                <button class="btn btn-xs btn-warning" @click="moveBack(process)">后退</button>
                                <button class="btn btn-xs btn-info" @click="showDetail(process)">详情</button>
                                <button class="btn btn-xs btn-primary" @click="assignWork(process)">派工</button>
                            </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="module-group">
                <!-- 右侧固定模块 - 待结算 -->
                <div class="module-settlement">
                    <div class="module-header">
                        <h4>待结算 <span class="count-badge">@{{ counts.settlement }}</span></h4>
                    </div>
                    <div class="process-container">
                        <ul class="process-list-container">
                            <li class="process-item"
                                v-for="(process, index) in processes.settlement"
                                :key="'settlement-'+index"
                            @mouseenter="process.showButtons = true"
                            @mouseleave="process.showButtons = false">
                            <div class="process-content">
                                <div class="process-right">
                                    <div class="process-code-parts">
                                        <div class="process-code">编号@{{ process.order_sn }}</div>
                                        <div class="process-parts">@{{ process.parts }}</div>
                                    </div>
                                    <div class="process-plate">@{{ process.car_number }}</div>
                                    <div class="process-vehicle">@{{ process.brand_title }} | @{{ process.car_title }} | @{{ process.service_advisor_name }}</div>
                                    <div class="process-dates">
                                        <div class="waiting-time">等待: @{{ process.wait_time }}</div>
                                        <div class="process-date">开单日期: @{{ process.opening_at }}</div>
                                        <div class="process-date">预交日期: @{{ process.pre_delivery_at }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="action-buttons" v-show="process.showButtons">
                                <button class="btn btn-xs btn-info" @click="showDetail(process)">详情</button>
                                <button class="btn btn-xs btn-success" @click="completeSettlement(process)">
                                结算</button>
                            </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 车辆列表弹窗 -->
    <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="90%"
            top="5vh">
        <el-row>
            <el-col :span="12">
                {{--<el-button type="primary" @click="exportData" size="small">--}}
                {{--导出数据--}}
                {{--</el-button>--}}
            </el-col>
            <el-col :span="12" style="text-align: right;float: right;">
                <el-button @click="dialogVisible = false" size="small">
                关闭
                </el-button>
            </el-col>
        </el-row>

        <el-table
                :data="tableData"
                border
                style="width: 100%; margin-top: 20px;"
                v-loading="loading">
            <el-table-column
                    prop="index"
                    label="序号"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="order_sn"
                    label="工单号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="car_number"
                    label="车牌号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="brand_title"
                    label="汽车品牌"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="car_title"
                    label="车系"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="service_advisor_name"
                    label="顾问"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="processes_archives_title"
                    label="当前工序"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="dispatch_user_name"
                    label="技师"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="opening_ats"
                    label="开单时间"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="pre_delivery_ats"
                    label="预交时间"
                    width="160">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="80">
                <template slot-scope="scope">
                    <el-button
                    @click="showDetail(scope.row)"
                    type="text"
                    size="small">
                    详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-wrapper">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
    </el-dialog>

    <div class="col-md-12">
        <el-dialog
                title="添加工单"
                :visible.sync="showCreateDialog"
                width="90%"
                top="5vh"
                :before-close="handleClose">

            <!-- 第一行操作栏 -->
            <div class="action-bar">
                {{--<el-button type="danger" size="small" @click="handleDelete">删除</el-button>--}}
                <div class="options-group">
                    <el-checkbox v-model="form.is_return">外返</el-checkbox>
                    <el-checkbox v-model="form.is_urgent">加急快修</el-checkbox>
                    <el-checkbox v-model="form.is_accident">大事故车</el-checkbox>
                </div>
                <div class="button-group">
                    <el-button type="primary" size="small" @click="submitForm">保存</el-button>
                    <el-button size="small" @click="showCreateDialog = false">关闭</el-button>
                </div>
            </div>

            <!-- 选项卡切换 -->
            <el-tabs v-model="activeTab" type="card">
                <el-tab-pane label="工单基本信息" name="basic">
                    <el-form :model="form" :rules="rules" ref="vehicleForm">
                    <!-- 车辆信息 -->
                    <el-card class="box-card" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>车辆信息</span>
                        </div>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="车牌号" prop="car_number">
                                    <el-input class="limitation-input" v-model="form.car_number"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="制造厂商" prop="brand_id">
                                    <el-select
                                            v-model="form.brand_id"
                                            filterable
                                            remote
                                            :remote-method="searchManufacturers"
                                            :loading="manufacturerLoading"
                                            @change=manufacturerChange>
                                        <el-option
                                                v-for="item in manufacturers"
                                                :key="item.id"
                                                :label="item.title"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="车辆型号" prop="car_id">
                                    <el-select
                                            v-model="form.car_id"
                                            filterable
                                            remote
                                            :remote-method="searchCarModels"
                                            :loading="modelLoading"
                                            :disabled="!form.brand_id">
                                        <el-option
                                                v-for="item in carModels"
                                                :key="item.id"
                                                :label="item.title"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="出厂年份" prop="factory_year">
                                    <el-date-picker
                                            v-model="form.factory_year"
                                            type="year"
                                            value-format="yyyy"
                                            placeholder="选择年">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="车架号码" prop="car_frame">
                                    <el-input v-model="form.car_frame"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>

                    <!-- 客户信息 -->
                    <el-card class="box-card" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>客户信息</span>
                        </div>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="姓名" prop="user_name">
                                    <el-input class="limitation-input" v-model="form.user_name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="联系方式" prop="user_phone">
                                    <el-input class="customer-phone-input" v-model="form.user_phone"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="邮箱" prop="user_email">
                                    <el-input class="limitation-input" v-model="form.user_email"></el-input>
                                </el-form-item>
                            </el-col>
                            {{--<el-col :span="6">--}}
                                {{--<el-form-item label="优惠券" prop="coupon">--}}
                                    {{--<el-input class="limitation-input" v-model="form.coupon"></el-input>--}}
                                {{--</el-form-item>--}}
                            {{--</el-col>--}}
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="是否自费" prop="is_self_pay">
                                    <el-radio-group v-model="form.is_self_pay">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="是否预约" prop="is_appointment">
                                    <el-radio-group v-model="form.is_appointment">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="预喷件设置" prop="is_pre_spray">
                                    <el-radio-group v-model="form.is_pre_spray">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="备注" prop="remarks">
                                    <el-input class="limitation-input"
                                            type="textarea"
                                            :rows="2"
                                            placeholder="请输入备注"
                                            v-model="form.remarks">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>

                    <!-- 工单信息 -->
                    <el-card class="box-card" shadow="never">
                        <div slot="header" class="clearfix">
                            <span>工单信息</span>
                        </div>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="工单号" prop="order_sn">
                                    <el-input class="limitation-input" v-model="form.order_sn"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="开单时间" prop="opening_at">
                                    <el-date-picker
                                            v-model="form.opening_at"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            value-format="yyyy-MM-dd HH:mm:ss">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="预交时间" prop="pre_delivery_at">
                                    <el-date-picker
                                            v-model="form.pre_delivery_at"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            value-format="yyyy-MM-dd HH:mm:ss">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="维修天数" prop="maintenance_days">
                                    <el-input-number v-model="form.maintenance_days" :min="1"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="服务顾问" prop="service_advisor_id">
                                    <el-select v-model="form.service_advisor_id" filterable>
                                        <el-option
                                                v-for="advisor in advisors"
                                                :key="advisor.id"
                                                :label="advisor.name"
                                                :value="advisor.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    </el-card>
                </el-tab-pane>

                <el-tab-pane label="车辆定损" name="damage">
                    <el-form :model="form" :rules="rules" ref="vehicleForm">
                    <el-row :gutter="20">
                        <!-- 油漆维修部件 -->
                        <el-col :span="12">
                            <el-card class="box-card" shadow="never">
                                <div slot="header" class="clearfix">
                                    <span>油漆维修部件</span>
                                    <el-button
                                            style="float: right; padding: 3px 0"
                                            type="text"
                                    @click="showPartsDialog('paint')">
                                    搜索
                                    </el-button>
                                </div>
                                <el-table
                                        :data="form.paint_parts"
                                        border
                                        style="width: 100%">
                                    <el-table-column
                                            prop="title"
                                            label="部件名称"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="damage_level_type"
                                            label="损伤程度">
                                        <template slot-scope="scope">
                                            <el-select
                                                    v-model="scope.row.damage_level_type"
                                            @change="calculatePaintPart(scope.row)" disabled>
                                            <el-option label="轻" value="light" selectd></el-option>
                                            <el-option label="中" value="medium"></el-option>
                                            <el-option label="重" value="heavy"></el-option>
                                            <el-option label="新件" value="new"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="damage_light_coefficient"
                                            label="比例系数">
                                    </el-table-column>
                                    <el-table-column
                                            prop="standard_working_base"
                                            label="油漆标准工时">
                                    </el-table-column>
                                    <el-table-column
                                            prop="performance_working_base"
                                            label="油漆绩效工时">
                                    </el-table-column>
                                    <el-table-column
                                            prop="standard_quantity_base"
                                            label="标准件数">
                                    </el-table-column>
                                    <el-table-column
                                            prop="performance_quantity_base"
                                            label="标准绩效件数">
                                    </el-table-column>
                                    <el-table-column
                                            label="操作">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    type="danger"
                                            @click="removePaintPart(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="summary">
                                    <p>油漆标准工时合计: @{{ paintTotal.standard_hours }}</p>
                                    <p>油漆绩效工时合计: @{{ paintTotal.performance_hours }}</p>
                                    <p>标准件数合计: @{{ paintTotal.standard_parts }}</p>
                                    <p>标准绩效件数合计: @{{ paintTotal.performance_parts }}</p>
                                </div>
                            </el-card>
                        </el-col>
                        <!-- 钣金维修部件 -->
                        <el-col :span="12">
                            <el-card class="box-card" shadow="never">
                                <div slot="header" class="clearfix">
                                    <span>钣金维修部件</span>
                                    <el-button
                                            style="float: right; padding: 3px 0"
                                            type="text"
                                    @click="showPartsDialog('sheet_metal')">
                                    搜索
                                    </el-button>
                                </div>
                                <el-table
                                        :data="form.sheet_metal_parts"
                                        border
                                        style="width: 100%"
                                        class="custom-table">
                                    <el-table-column
                                            prop="title"
                                            label="部件名称"
                                            width="100">
                                    </el-table-column>
                                    <el-table-column
                                            prop="damage_level_type"
                                            label="损伤程度">
                                        <template slot-scope="scope">
                                            <el-select
                                                    v-model="scope.row.damage_level_type"
                                            @change="calculateSheetMetalPart(scope.row)" disabled>
                                            <el-option label="轻" value="light"></el-option>
                                            <el-option label="中" value="medium"></el-option>
                                            <el-option label="重" value="heavy"></el-option>
                                            <el-option label="新件" value="new"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="damage_light_coefficient"
                                            label="比例系数">
                                    </el-table-column>
                                    <el-table-column
                                            prop="standard_working_base"
                                            label="钣金标准工时">
                                    </el-table-column>
                                    <el-table-column
                                            prop="performance_working_base"
                                            label="钣金绩效工时">
                                    </el-table-column>
                                    <el-table-column
                                            prop="standard_quantity_base"
                                            label="标准件数">
                                    </el-table-column>
                                    <el-table-column
                                            prop="performance_quantity_base"
                                            label="标准绩效件数">
                                    </el-table-column>
                                    <el-table-column
                                            label="操作">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    type="danger"
                                            @click="removeSheetMetalPart(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="summary">
                                    <p>钣金标准工时合计: @{{ sheetMetalTotal.standard_hours }}</p>
                                    <p>钣金绩效工时合计: @{{ sheetMetalTotal.performance_hours }}</p>
                                    <p>标准件数合计: @{{ sheetMetalTotal.standard_parts }}</p>
                                    <p>标准绩效件数合计: @{{ sheetMetalTotal.performance_parts }}</p>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>

        <!-- 部件选择对话框 -->
        <el-dialog
                :title="partsDialogTitle"
                :visible.sync="partsDialogVisible"
                width="85%"
                top="5vh">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="car-model">
                        <div
                            v-for="area in areas"
                            :key="area.value"
                            :class="['car-area', `car-${area.value}`]"
                        >
                            <el-checkbox v-model="selectedAreas[area.value]" @change="handleAreaCheck(area.value)">
                                @{{ area.label }}
                            </el-checkbox>
                        </div>
                    </div>
                </el-col>
                <el-col :span="16">
                    <el-table
                            ref="partsTable"
                            :data="filteredParts"
                            border
                            style="width: 100%"
                            row-key="id"
                    @selection-change="handlePartsSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="部件名称"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="damage_level_type"
                            label="损伤程度">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.damage_level_type">
                                <el-option label="轻" value="light"></el-option>
                                <el-option label="中" value="medium"></el-option>
                                <el-option label="重" value="heavy"></el-option>
                                <el-option label="新件" value="new"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="damage_light_coefficient"
                            label="比例系数">
                    </el-table-column>
                    <el-table-column
                            prop="standard_working_base"
                            label="标准工时">
                        <template slot-scope="scope">
                            <el-input
                                    v-model="scope.row.standard_working_base"
                                    :min="0"
                                    :precision="2">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="performance_working_base"
                            label="绩效工时">
                        <template slot-scope="scope">
                            <el-input
                                    v-model="scope.row.performance_working_base"
                                    :min="0"
                                    :precision="2">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="standard_quantity_base"
                            label="标准件数">
                        <template slot-scope="scope">
                            <el-input
                                    v-model="scope.row.standard_quantity_base"
                                    :min="0"
                                    :precision="2">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="performance_quantity_base"
                            label="标准绩效件数">
                        <template slot-scope="scope">
                            <el-input
                                    v-model="scope.row.performance_quantity_base"
                                    :min="0"
                                    :precision="2">
                            </el-input>
                        </template>
                    </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="partsDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="confirmParts">确认</el-button>
            </div>
        </el-dialog>
    </div>

    <div class="col-md-12">
        <el-dialog
                title="编辑工单"
                :visible.sync="showCreateDialog2"
                width="90%"
                top="5vh"
                :before-close="handleClose">

            <!-- 第一行操作栏 -->
            <div class="action-bar">
                <el-button type="danger" size="small" v-if="permission_status" @click="handleDelete">删除</el-button>
                <div class="options-group">
                    <el-checkbox v-model="form2.is_return">外返</el-checkbox>
                    <el-checkbox v-model="form2.is_urgent">加急快修</el-checkbox>
                    <el-checkbox v-model="form2.is_accident">大事故车</el-checkbox>
                </div>
                <div class="button-group">
                    <el-button type="primary" size="small" @click="submitForm2">保存</el-button>
                    <el-button size="small" @click="showCreateDialog2 = false">关闭</el-button>
                </div>
            </div>

            <!-- 选项卡切换 -->
            <el-tabs v-model="activeTab2" type="card" @tab-click="handleTabClick">
                <el-tab-pane label="工单基本信息" name="basic">
                    <el-form :model="form" :rules="rules" ref="vehicleForm">
                        <!-- 车辆信息 -->
                        <el-card class="box-card" shadow="never">
                            <div slot="header" class="clearfix">
                                <span>车辆信息</span>
                            </div>
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="车牌号" prop="car_number">
                                        <el-input class="limitation-input" disabled v-model="form2.car_number"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="制造厂商" prop="brand_id">
                                        <el-select
                                                v-model="form2.brand_id"
                                                filterable
                                                remote
                                                :remote-method="searchManufacturers"
                                                :loading="manufacturerLoading"
                                                disabled
                                        @change=manufacturerChange>
                                        <el-option
                                                v-for="item in manufacturers"
                                                :key="item.id"
                                                :label="item.title"
                                                :value="item.id">
                                        </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="车辆型号" prop="car_id">
                                        <el-select
                                                v-model="form2.car_id"
                                                filterable
                                                remote
                                                :remote-method="searchCarModels"
                                                :loading="modelLoading"
                                                disabled>
                                            <el-option
                                                    v-for="item in carModels"
                                                    :key="item.id"
                                                    :label="item.title"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="出厂年份" prop="factory_year">
                                        <el-date-picker
                                                v-model="form2.factory_year"
                                                type="year"
                                                value-format="yyyy"
                                                placeholder="选择年">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="车架号码" prop="car_frame">
                                        <el-input v-model="form2.car_frame" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-card>

                        <!-- 客户信息 -->
                        <el-card class="box-card" shadow="never">
                            <div slot="header" class="clearfix">
                                <span>客户信息</span>
                            </div>
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="姓名" prop="user_name">
                                        <el-input class="limitation-input" v-model="form2.user_name" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="联系方式" prop="user_phone">
                                        <el-input class="customer-phone-input" v-model="form2.user_phone" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="邮箱" prop="user_email">
                                        <el-input class="limitation-input" v-model="form2.user_email"></el-input>
                                    </el-form-item>
                                </el-col>
                                {{--<el-col :span="6">--}}
                                {{--<el-form-item label="优惠券" prop="coupon">--}}
                                {{--<el-input class="limitation-input" v-model="form.coupon"></el-input>--}}
                                {{--</el-form-item>--}}
                                {{--</el-col>--}}
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="是否自费" prop="is_self_pay">
                                        <el-radio-group v-model="form2.is_self_pay">
                                            <el-radio :label="true">是</el-radio>
                                            <el-radio :label="false">否</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="是否预约" prop="is_appointment">
                                        <el-radio-group v-model="form2.is_appointment">
                                            <el-radio :label="true">是</el-radio>
                                            <el-radio :label="false">否</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="预喷件设置" prop="is_pre_spray">
                                        <el-radio-group v-model="form2.is_pre_spray">
                                            <el-radio :label="true">是</el-radio>
                                            <el-radio :label="false">否</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="备注" prop="remarks">
                                        <el-input class="limitation-input"
                                                  type="textarea"
                                                  :rows="2"
                                                  placeholder="请输入备注"
                                                  v-model="form2.remarks">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-card>

                        <!-- 工单信息 -->
                        <el-card class="box-card" shadow="never">
                            <div slot="header" class="clearfix">
                                <span>工单信息</span>
                            </div>
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="工单号" prop="order_sn">
                                        <el-input class="limitation-input" v-model="form2.order_sn" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="开单时间" prop="opening_at">
                                        <el-date-picker
                                                v-model="form2.opening_at"
                                                type="datetime"
                                                placeholder="选择日期时间"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                disabled>
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="预交时间" prop="pre_delivery_at">
                                        <el-date-picker
                                                v-model="form2.pre_delivery_at"
                                                type="datetime"
                                                placeholder="选择日期时间"
                                                value-format="yyyy-MM-dd HH:mm:ss">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="维修天数" prop="maintenance_days">
                                        <el-input-number v-model="form2.maintenance_days" :min="1"></el-input-number>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="服务顾问" prop="service_advisor_id">
                                        <el-select v-model="form2.service_advisor_id" filterable disabled>
                                            <el-option
                                                    v-for="advisor in advisors"
                                                    :key="advisor.id"
                                                    :label="advisor.name"
                                                    :value="advisor.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                    </el-form>
                    </el-card>
                </el-tab-pane>

                <el-tab-pane label="车辆定损" name="damage">
                    <el-form :model="form" :rules="rules" ref="vehicleForm">
                        <el-row :gutter="20">
                            <!-- 油漆维修部件 -->
                            <el-col :span="12">
                                <el-card class="box-card" shadow="never">
                                    <div slot="header" class="clearfix">
                                        <span>油漆维修部件</span>
                                        <el-button
                                                style="float: right; padding: 3px 0"
                                                type="text"
                                        @click="showPartsDialog2('paint')">
                                        搜索
                                        </el-button>
                                    </div>
                                    <el-table
                                            :data="form2.paint_parts"
                                            border
                                            style="width: 100%">
                                        <el-table-column
                                                prop="title"
                                                label="部件名称"
                                                width="100">
                                        </el-table-column>
                                        <el-table-column
                                                prop="damage_level_type"
                                                label="损伤程度">
                                            <template slot-scope="scope">
                                                <el-select
                                                        v-model="scope.row.damage_level_type"
                                                @change="calculatePaintPart(scope.row)" disabled>
                                                <el-option label="轻" value="light" selectd></el-option>
                                                <el-option label="中" value="medium"></el-option>
                                                <el-option label="重" value="heavy"></el-option>
                                                <el-option label="新件" value="new"></el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                prop="damage_light_coefficient"
                                                label="比例系数">
                                        </el-table-column>
                                        <el-table-column
                                                prop="standard_working_base"
                                                label="油漆标准工时">
                                        </el-table-column>
                                        <el-table-column
                                                prop="performance_working_base"
                                                label="油漆绩效工时">
                                        </el-table-column>
                                        <el-table-column
                                                prop="standard_quantity_base"
                                                label="标准件数">
                                        </el-table-column>
                                        <el-table-column
                                                prop="performance_quantity_base"
                                                label="标准绩效件数">
                                        </el-table-column>
                                        <el-table-column
                                                label="操作">
                                            <template slot-scope="scope">
                                                <el-button
                                                        size="mini"
                                                        type="danger"
                                                @click="removePaintPart2(scope.$index, scope.row)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div class="summary">
                                        <p>油漆标准工时合计: @{{ paintTotal2.standard_hours }}</p>
                                        <p>油漆绩效工时合计: @{{ paintTotal2.performance_hours }}</p>
                                        <p>标准件数合计: @{{ paintTotal2.standard_parts }}</p>
                                        <p>标准绩效件数合计: @{{ paintTotal2.performance_parts }}</p>
                                    </div>
                                </el-card>
                            </el-col>
                            <!-- 钣金维修部件 -->
                            <el-col :span="12">
                                <el-card class="box-card" shadow="never">
                                    <div slot="header" class="clearfix">
                                        <span>钣金维修部件</span>
                                        <el-button
                                                style="float: right; padding: 3px 0"
                                                type="text"
                                        @click="showPartsDialog2('sheet_metal')">
                                        搜索
                                        </el-button>
                                    </div>
                                    <el-table
                                            :data="form2.sheet_metal_parts"
                                            border
                                            style="width: 100%">
                                        <el-table-column
                                                prop="title"
                                                label="部件名称"
                                                width="100">
                                        </el-table-column>
                                        <el-table-column
                                                prop="damage_level_type"
                                                label="损伤程度">
                                            <template slot-scope="scope">
                                                <el-select
                                                        v-model="scope.row.damage_level_type"
                                                @change="calculateSheetMetalPart(scope.row)" disabled>
                                                <el-option label="轻" value="light"></el-option>
                                                <el-option label="中" value="medium"></el-option>
                                                <el-option label="重" value="heavy"></el-option>
                                                <el-option label="新件" value="new"></el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                prop="damage_light_coefficient"
                                                label="比例系数">
                                        </el-table-column>
                                        <el-table-column
                                                prop="standard_working_base"
                                                label="钣金标准工时">
                                        </el-table-column>
                                        <el-table-column
                                                prop="performance_working_base"
                                                label="钣金绩效工时">
                                        </el-table-column>
                                        <el-table-column
                                                prop="standard_quantity_base"
                                                label="标准件数">
                                        </el-table-column>
                                        <el-table-column
                                                prop="performance_quantity_base"
                                                label="标准绩效件数">
                                        </el-table-column>
                                        <el-table-column
                                                label="操作">
                                            <template slot-scope="scope">
                                                <el-button
                                                        size="mini"
                                                        type="danger"
                                                @click="removeSheetMetalPart2(scope.$index)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div class="summary">
                                        <p>钣金标准工时合计: @{{ sheetMetalTotal2.standard_hours }}</p>
                                        <p>钣金绩效工时合计: @{{ sheetMetalTotal2.performance_hours }}</p>
                                        <p>标准件数合计: @{{ sheetMetalTotal2.standard_parts }}</p>
                                        <p>标准绩效件数合计: @{{ sheetMetalTotal2.performance_parts }}</p>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="派工记录" name="work_log">
                    <el-row :gutter="25">
                        <el-col :span="24">
                            <el-card class="box-card" shadow="never">
                                <el-table
                                        :data="workLog"
                                        border
                                        empty-text="暂无记录"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="processes_archives_title"
                                            label="工序">
                                    </el-table-column>
                                    <el-table-column
                                            prop="user_name"
                                            label="技师">
                                    </el-table-column>
                                    <el-table-column
                                            prop="actual_start_at"
                                            label="实际开工时间">
                                    </el-table-column>
                                    <el-table-column
                                            prop="actual_end_at"
                                            label="实际结束时间">
                                    </el-table-column>
                                    <el-table-column
                                            prop="pre_delivery_at"
                                            label="预计完工时间">
                                    </el-table-column>
                                    <el-table-column
                                            prop="quantity"
                                            label="件数">
                                    </el-table-column>
                                    <el-table-column
                                            prop="repair_status_title"
                                            label="结束类型">
                                    </el-table-column>
                                </el-table>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-tab-pane>

                <el-tab-pane label="操作记录" name="operation_log">
                    <el-row :gutter="25">
                        <el-col :span="24">
                            <el-card class="box-card" shadow="never">
                                <el-table
                                        :data="operationLog"
                                        border
                                        empty-text="暂无记录"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="created_at"
                                            label="操作时间">
                                    </el-table-column>
                                    <el-table-column
                                            prop="operation_name"
                                            label="操作人">
                                    </el-table-column>
                                    <el-table-column
                                            prop="processes_archives_title"
                                            label="工序">
                                    </el-table-column>
                                    <el-table-column
                                            prop="user_name"
                                            label="技师">
                                    </el-table-column>
                                    <el-table-column
                                            prop="content"
                                            label="操作内容">
                                    </el-table-column>
                                </el-table>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-tab-pane>

                <el-tab-pane label="拍照记录" name="photo_log">
                    <el-row :gutter="25">
                        <el-col :span="24">
                            <el-card class="box-card" shadow="never">
                                <el-table
                                        :data="photoLog"
                                        border
                                        empty-text="暂无记录"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="pics"
                                            label="图片">
                                        <template slot-scope="scope">
                                            <!-- 使用 img 标签 -->
                                            <img :src="scope.row.pics" style="width: 50px; height: 50px;"/>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="user_name"
                                            label="上传者">
                                    </el-table-column>
                                    <el-table-column
                                            prop="processes_archives_title"
                                            label="工序">
                                    </el-table-column>
                                    <el-table-column
                                            prop="created_at"
                                            label="上传时间">
                                    </el-table-column>
                                </el-table>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-tab-pane>

                <el-tab-pane label="内返中断记录" name="rework_stop_log">
                    <el-row :gutter="25">
                        <el-col :span="24">
                            <el-card class="box-card" shadow="never">
                                <el-table
                                        :data="reworkStopLog"
                                        border
                                        empty-text="暂无记录"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="type_title"
                                            label="类型">
                                    </el-table-column>
                                    <el-table-column
                                            prop="processes_archives_title"
                                            label="工序">
                                    </el-table-column>
                                    <el-table-column
                                            prop="content"
                                            label="原因">
                                    </el-table-column>
                                    <el-table-column
                                            prop="created_at"
                                            label="时间">
                                    </el-table-column>
                                </el-table>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>

        <!-- 部件选择对话框 -->
        <el-dialog
                :title="partsDialogTitle"
                :visible.sync="partsDialogVisible2"
                width="85%"
                top="5vh">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="car-model">
                        <div v-for="area in areas" :key="area.value" :class="['car-area', `car-${area.value}`]">
                            <el-checkbox v-model="selectedAreas[area.value]" @change="handleAreaCheck2(area.value)">
                                @{{ area.label }}
                            </el-checkbox>
                        </div>
                    </div>
                </el-col>
                <div class="table-box">
                    <el-col :span="16">
                        <el-table
                                ref="partsTable"
                                :data="filteredParts"
                                border
                                style="width: 100%;"
                                row-key="id"
                        @selection-change="handlePartsSelectionChange2">
                        <el-table-column
                                type="selection"
                                width="55"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="title"
                                label="部件名称"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="damage_level_type"
                                label="损伤程度">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.damage_level_type">
                                    <el-option label="轻" value="light"></el-option>
                                    <el-option label="中" value="medium"></el-option>
                                    <el-option label="重" value="heavy"></el-option>
                                    <el-option label="新件" value="new"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="damage_light_coefficient"
                                label="比例系数">
                        </el-table-column>
                        <el-table-column
                                prop="standard_working_base"
                                label="标准工时">
                            <template slot-scope="scope">
                                <el-input
                                        v-model="scope.row.standard_working_base"
                                        :min="0"
                                        :precision="2">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="performance_working_base"
                                label="绩效工时">
                            <template slot-scope="scope">
                                <el-input
                                        v-model="scope.row.performance_working_base"
                                        :min="0"
                                        :precision="2">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="standard_quantity_base"
                                label="标准件数">
                            <template slot-scope="scope">
                                <el-input
                                        v-model="scope.row.standard_quantity_base"
                                        :min="0"
                                        :precision="2">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="performance_quantity_base"
                                label="标准绩效件数">
                            <template slot-scope="scope">
                                <el-input
                                        v-model="scope.row.performance_quantity_base"
                                        :min="0"
                                        :precision="2">
                                </el-input>
                            </template>
                        </el-table-column>
                        </el-table>
                    </el-col>
                </div>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="partsDialogVisible2 = false">关闭</el-button>
                <el-button type="primary" @click="confirmParts2">确认</el-button>
            </div>
        </el-dialog>
    </div>

    <div class="col-md-12">
        <el-dialog
                title="派工操作"
                :visible.sync="dispatchWorkDialog"
                width="90%"
                top="5vh"
                :before-close="handleClose">
            <!-- 第一行操作栏 -->
            <div class="action-bar">
                <div class="options-group">
                    <p>工单号：@{{ dispatchWorkInfo.order_sn }}</p>
                    <p>车牌号：@{{ dispatchWorkInfo.car_number }}</p>
                    <p>车辆型号：@{{ dispatchWorkInfo.car_title }}</p>
                    <p>车主姓名：@{{ dispatchWorkInfo.user_name }}</p>
                </div>
            </div>

            <el-form :model="form" :rules="rules" ref="vehicleForm">
                <!-- 车辆信息 -->
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>工单工序</span>
                    </div>
                    <div class="status-options">
                        <el-button
                                v-for="status in statusOptions"
                                :key="status.id"
                                :type="getButtonType(status)"
                                :disabled="status.value === selectedStatus"
                        @click="handleStatusClick(status)"
                        class="status-button"
                        >
                        @{{ status.title }}
                        </el-button>
                    </div>
                </el-card>
                <!-- 技师信息显示区域 -->
                <el-card class="box-card technician-info">
                    <div slot="header" class="clearfix">
                        <span>可选技师列表</span>
                    </div>

                    <el-alert
                            v-if="selectedTechnician"
                            title="已选择技师"
                            type="success"
                            :description="`${selectedTechnician.user_name}`"
                            show-icon
                            :closable="false"
                            style="margin-bottom: 15px"
                    ></el-alert>

                    <div class="technician-list">
                        <el-radio-group v-model="selectedTechnicianId" @change="handleTechnicianSelect">
                        <el-card
                                v-for="tech in technicianData"
                                :key="tech.id"
                                shadow="hover"
                                :class="['technician-card', { 'is-selected': selectedTechnicianId === tech.id }]"
                        >
                            <el-radio :label="tech.id">
                                <div class="tech-info">
                                    <div class="tech-avatar">
                                        <el-avatar :src="tech.avatar || '/images/default-avatar.png'"></el-avatar>
                                    </div>
                                    <div class="tech-details">
                                        <h4>@{{ tech.user_name }}</h4>
                                        <p>正在维修: <el-tag size="mini">@{{ tech.dispatch_count }}辆</el-tag></p>
                                    </div>
                                </div>
                            </el-radio>
                        </el-card>
                        </el-radio-group>
                    </div>

                    <div class="action-buttons">
                        <el-button type="primary" @click="confirmTechnicianSelection" :loading="confirmLoading">
                        确认
                        </el-button>
                        <el-button @click="dispatchWorkDialog = false">取消</el-button>
                    </div>
                </el-card>
            </el-form>
        </el-dialog>
    </div>

    <div class="col-md-12">
        <el-dialog
                title="返工操作"
                :visible.sync="reworkDialog"
                width="90%"
                top="5vh"
                :before-close="handleClose">
            <!-- 第一行操作栏 -->
            <div class="action-bar">
                <div class="options-group">
                    <p>工单号：@{{ dispatchWorkInfo.order_sn }}</p>
                    <p>车牌号：@{{ dispatchWorkInfo.car_number }}</p>
                    <p>车辆型号：@{{ dispatchWorkInfo.car_title }}</p>
                    <p>车主姓名：@{{ dispatchWorkInfo.user_name }}</p>
                </div>
            </div>

            <el-form :model="form" :rules="rules" ref="vehicleForm">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>返工原因</span>
                    </div>
                    <div class="status-options">
                        <el-button
                                v-for="status in reworkOptions"
                                :key="status.id"
                                :type="getReworkButtonType(status)"
                                :disabled="status.value === reworkSelectedStatus"
                        @click="handleReworkStatusClick(status)"
                        class="status-button"
                        >
                        @{{ status.title }}
                        </el-button>
                    </div>
                    <div>
                        <el-form-item label="返工备注">
                            <el-input type="textarea" v-model="reworkRemark"></el-input>
                        </el-form-item>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>工单工序</span>
                    </div>
                    <div class="status-options">
                        <el-button
                                v-for="status in statusOptions"
                                :key="status.id"
                                :type="getButtonType(status)"
                                :disabled="status.value === selectedStatus"
                        @click="handleStatusClick(status)"
                        class="status-button"
                        >
                        @{{ status.title }}
                        </el-button>
                    </div>
                </el-card>
                <el-card class="box-card technician-info">
                    <div slot="header" class="clearfix">
                        <span>可选技师列表</span>
                    </div>

                    <el-alert
                            v-if="selectedTechnician"
                            title="已选择技师"
                            type="success"
                            :description="`${selectedTechnician.user_name}`"
                            show-icon
                            :closable="false"
                            style="margin-bottom: 15px"
                    ></el-alert>

                    <div class="technician-list">
                        <el-radio-group v-model="selectedTechnicianId" @change="handleTechnicianSelect">
                        <el-card
                                v-for="tech in technicianData"
                                :key="tech.id"
                                shadow="hover"
                                :class="['technician-card', { 'is-selected': selectedTechnicianId === tech.id }]"
                        >
                            <el-radio :label="tech.id">
                                <div class="tech-info">
                                    <div class="tech-avatar">
                                        <el-avatar :src="tech.avatar || '/images/default-avatar.png'"></el-avatar>
                                    </div>
                                    <div class="tech-details">
                                        <h4>@{{ tech.user_name }}</h4>
                                        <p>正在维修: <el-tag size="mini">@{{ tech.dispatch_count }}辆</el-tag></p>
                                    </div>
                                </div>
                            </el-radio>
                        </el-card>
                        </el-radio-group>
                    </div>

                    <div class="action-buttons">
                        <el-button type="primary" @click="reworkTechnicianSelection" :loading="confirmLoading">
                        确认
                        </el-button>
                        <el-button @click="reworkDialog = false">取消</el-button>
                    </div>
                </el-card>
            </el-form>
        </el-dialog>
    </div>

    <div class="col-md-12">
        <el-dialog
                title="中断操作"
                :visible.sync="stopDialog"
                width="90%"
                top="5vh"
                :before-close="handleClose">
            <div class="action-bar">
                <div class="options-group">
                    <p>工单号：@{{ dispatchWorkInfo.order_sn }}</p>
                    <p>车牌号：@{{ dispatchWorkInfo.car_number }}</p>
                    <p>车辆型号：@{{ dispatchWorkInfo.car_title }}</p>
                    <p>车主姓名：@{{ dispatchWorkInfo.user_name }}</p>
                </div>
            </div>

            <el-form :model="form" :rules="rules" ref="vehicleForm">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>中断原因</span>
                    </div>
                    <div class="status-options">
                        <el-button
                                v-for="status in stopOptions"
                                :key="status.id"
                                :type="getStopButtonType(status)"
                                :disabled="status.value === stopSelectedStatus"
                        @click="handleStopStatusClick(status)"
                        class="status-button"
                        >
                        @{{ status.title }}
                        </el-button>
                    </div>
                    <div>
                        <el-form-item label="中断备注">
                            <el-input type="textarea" v-model="stopRemark"></el-input>
                        </el-form-item>
                    </div>
                    <div class="action-buttons">
                        <el-button type="primary" @click="stopTechnicianSelection" :loading="confirmLoading">
                        确认
                        </el-button>
                        <el-button @click="stopDialog = false">取消</el-button>
                    </div>
                </el-card>
            </el-form>
        </el-dialog>
    </div>
</div>
<script>
    Dcat.ready(function () {
        initWorkshopApp();
    });

    function initWorkshopApp() {
        // 销毁旧实例
        if (window.workshopApp) {
            window.workshopApp.$destroy();
        }
        $("#workshop-app").css("display", "block");

        // 创建新实例
        window.workshopApp = new Vue({
            el: '#workshop-app',
            data: {
                counts: @json($counts),
                modules: @json($modules),
                processes: @json($order),
                cards: @json($processCounts),
                workshops: @json($work_shop),
                permission_status: @json($permission_status),
                searchQuery: '',
                selectedWorkshop: @json($user_workshop_id),
                showModalFlag: false,
                showCreateDialog: false,
                showCreateDialog2: false,
                dispatchWorkDialog: false,
                reworkDialog: false,
                stopDialog: false,
                dispatchWorkInfo: {},
                currentModalTitle: '',
                dialogVisible: false,
                dialogTitle: '',
                currentType: '',
                tableData: [],
                loading: false,
                currentPage: 1,
                pageSize: 10,
                total: 0,
                activeTab: 'basic',
                form: {
                    is_return: false,
                    is_urgent: false,
                    is_accident: false,
                    order_sn: '',
                    opening_at: new Date(),
                    pre_delivery_at: new Date(),
                    maintenance_days: 1,
                    service_advisor_id: '',
                    car_number: '',
                    brand_id: '',
                    car_id: '',
                    factory_year: '',
                    car_frame: '',
                    user_name: '',
                    user_phone: '',
                    user_email: '',
//                        coupon: '',
                    is_self_pay: true,
                    is_appointment: false,
                    is_pre_spray: false,
                    remarks: '',
                    paint_parts: [],
                    sheet_metal_parts: []
                },
                activeTab2: 'basic',
                form2: {
                    id: '',
                    is_return: false,
                    is_urgent: false,
                    is_accident: false,
                    order_sn: '',
                    opening_at: new Date(),
                    pre_delivery_at: new Date(),
                    maintenance_days: 1,
                    service_advisor_id: '',
                    car_number: '',
                    brand_id: '',
                    car_id: '',
                    factory_year: '',
                    car_frame: '',
                    user_name: '',
                    user_phone: '',
                    user_email: '',
//                        coupon: '',
                    is_self_pay: true,
                    is_appointment: false,
                    is_pre_spray: false,
                    remarks: '',
                    paint_parts: [],
                    sheet_metal_parts: []
                },
                manufacturers: @json($brand),
                manufacturerLoading: false,
                carModels: [],
                modelLoading: false,
                advisors: @json($user),
                partsDialogVisible: false,
                partsDialogVisible2: false,
                partsDialogTitle: '',
                currentPartsType: '',
                parts: [],
                selectedParts: [],
                selectedParts2: [],
                areas: [
                    { value: 'top', label: '顶部' },
                    { value: 'front', label: '前部' },
                    { value: 'left', label: '左侧' },
                    { value: 'right', label: '右侧' },
                    { value: 'rear', label: '后部' },
                    { value: 'other', label: '其他' }
                ],
                selectedAreas: {
                    top: false,
                    front: false,
                    left: false,
                    right: false,
                    rear: false,
                    other: false
                },
                filteredParts: [],
                currentSelected: null,
                rules: {
                    'car_frame': [
                        { required: true, message: '请输入车架号码', trigger: 'blur' }
                    ],
                    'car_number': [
                        { required: true, message: '请输入车牌号', trigger: 'blur' }
                    ]
                },
                statusOptions: [], // 将从接口获取
                reworkOptions: [], // 将从接口获取
                stopOptions: [],
                selectedStatus: null,
                reworkSelectedStatus: null,
                reworkRemark: '',
                stopSelectedStatus: null,
                stopRemark: '',
                reworkDispatchId: null,
                technicianData: null,
                selectedTechnicianId: null,
                selectedTechnician: null,
                showTechnicianPanel: false,
                confirmLoading: false,
                workLog: [],
                operationLog: [],
                photoLog: [],
                reworkStopLog: [],
                roles_type: @json($roles_type),
                paintTotal: {},
                sheetMetalTotal: {},
                paintTotal2: {},
                sheetMetalTotal2: {}
            },
            computed: {
                doubleModules() {
                    return this.modules.filter(m => !m.type || m.type !== 'single');
                },
                fixedModule() {
                    return this.modules.find(m => m.name === 'pending');
                },
//                filteredParts() {
//                    // 根据选择的区域过滤部件
//                    const selectedAreas = Object.keys(this.selectedAreas)
//                        .filter(key => this.selectedAreas[key]);
//
//                    if (selectedAreas.length === 0) return this.parts;
//
//                    return this.parts.filter(part =>
//                        selectedAreas.includes(part.area)
//                    );
//                },
            },
            mounted() {
                this.$nextTick(() => {
//                    console.log(this.$options); // 使用 $nextTick 确保 DOM 更新完成
                });
            },
            created() {
//                this.generateAllProcesses();
                this.generateOrderNo();
            },
            methods: {
                getModuleCode(moduleType) {
                    const codes = {
                        'pending': 'PW',
                        'disassembly': 'DS',
                        'shaping': 'SP',
                        'priming': 'PM',
                        'painting': 'PT',
                        'reassembly': 'RA',
                        'polishing': 'PL',
                        'electrical': 'EC',
                        'inspection': 'QC',
                        'settlement': 'ST'
                    };
                    return codes[moduleType] || 'XX';
                },
                randomDate(daysMin = 0, daysMax = 7) {
                    const today = new Date();
                    const diffDays = Math.floor(Math.random() * (daysMax - daysMin + 1)) + daysMin;
                    const date = new Date(today);
                    date.setDate(today.getDate() - diffDays);

                    const hours = Math.floor(Math.random() * 12) + 8;
                    const minutes = Math.floor(Math.random() * 60);

                    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
                },
                showDetail(process) {
                    this.form2 = null;
                    this.showCreateDialog2 = true;
                    this.form2 = process;
                    axios.get('/admin/work-order-detail', {
                        params: {
                            order_id: process.id
                        }
                    }).then(response => {
                        const order_detail =  response.data.data;
                        this.carModels = [{'id': process.car_id, 'title':process.car.title}];
                        this.form2.paint_parts = order_detail.paint_parts;
                        this.form2.sheet_metal_parts = order_detail.sheet_metal_parts;
                        this.paintTotal2 =  this.calculateTotal(this.form2.paint_parts);
                        this.sheetMetalTotal2 = this.calculateTotal(this.form2.sheet_metal_parts);
                    }).catch(error => {
                        console.error(error);
                    });
                },
                assignWork(process) {
                    this.selectedTechnicianId = null;
                    this.selectedTechnician = null;
                    this.selectedStatus = null;
                    this.technicianData = null;

                    this.dispatchWorkInfo.order_id = process.id;
                    this.dispatchWorkInfo.order_sn = process.order_sn;
                    this.dispatchWorkInfo.car_number = process.car_number;
                    this.dispatchWorkInfo.car_title = process.car_title;
                    this.dispatchWorkInfo.user_name = process.user_name;
                    this.dispatchWorkDialog = true;
                    axios.get('/admin/processes-archives-all').then(response => {
                        this.statusOptions = response.data.data;
                    }).catch(error => {
                        console.error('获取工序选项失败:', error);
                    });
                },
                // 处理详情tab切换
                handleTabClick(tab) {
                    if (tab.name === 'work_log') {
                        this.workLogAll();
                    } else if(tab.name === 'operation_log') {
                        this.operationLogAll();
                    } else if(tab.name === 'photo_log') {
                        this.photoLogAll();
                    } else if(tab.name === 'rework_stop_log') {
                        this.reworkStopLogAll();
                    }
                },
                workLogAll() {
                    axios.get('/admin/work-log-all', {
                        params: {
                            order_id: this.form2.id
                        }
                    }).then(response => {
                        this.workLog = response.data.data;
                    }).catch(error => {
                        console.error(error);
                    });
                },
                operationLogAll() {
                    axios.get('/admin/operation-log-all', {
                        params: {
                            order_id: this.form2.id
                        }
                    }).then(response => {
                        this.operationLog = response.data.data;
                    }).catch(error => {
                        console.error(error);
                    });
                },
                photoLogAll() {
                    axios.get('/admin/photo-log-all', {
                        params: {
                            order_id: this.form2.id
                        }
                    }).then(response => {
                        this.photoLog = response.data.data;
                    }).catch(error => {
                        console.error(error);
                    });
                },
                reworkStopLogAll() {
                    axios.get('/admin/rework-stop-log-all', {
                        params: {
                            order_id: this.form2.id
                        }
                    }).then(response => {
                        this.reworkStopLog = response.data.data;
                    }).catch(error => {
                        console.error(error);
                    });
                },
                // 获取按钮类型
                getButtonType(status) {
                    if (status) {
                        if (status.id === this.selectedStatus) {
                            return 'success';
                        }
                        return status.title.includes('等待') ? 'info' : 'primary';
                    } else {
                        return 'primary';
                    }
                },
                // 获取按钮类型
                getReworkButtonType(status) {
                    if (status.id === this.reworkSelectedStatus) {
                        return 'success';
                    }
                    return status.title.includes('等待') ? 'info' : 'primary';
                },
                // 获取按钮类型
                getStopButtonType(status) {
                    if (status.id === this.stopSelectedStatus) {
                        return 'success';
                    }
                    return 'primary';
                },
                // 处理技师选择
                handleTechnicianSelect(techId) {
                    this.selectedTechnician = this.technicianData.find(t => t.id === techId);
                },
                // 处理状态点击
                handleStatusClick(status) {
                    this.selectedStatus = status.id;
                    if (status.dispatch_id) {
                        this.reworkDispatchId = status.dispatch_id;
                    }
                    console.log(status);
                    this.fetchTechnicianInfo(status.id);
                },
                // 处理状态点击
                handleReworkStatusClick(status) {
                    this.reworkSelectedStatus = status.id;
                },
                // 处理状态点击
                handleStopStatusClick(status) {
                    this.stopSelectedStatus = status.id;
                },
                // 获取技师信息
                fetchTechnicianInfo(statusValue) {
                    this.loading = true;
                    this.technicianData = null;

                    this.selectedTechnician = null;

                    axios.get(`/admin/technician-all?id=${statusValue}`).then(response => {
                        this.technicianData = response.data.data;
                    }).catch(error => {
                        console.error('获取技师信息失败:', error);
                    }).finally(() => {
                        this.loading = false;
                    });
                },
                // 确认技师选择
                confirmTechnicianSelection() {
                    if (!this.selectedStatus) {
                        this.$message.warning('请先选择工单工序');
                        return;
                    }

                    this.confirmLoading = true;

                    axios.post('/admin/work-order-assign', {
                        work_order_id: this.dispatchWorkInfo.order_id,
                        processes_archive_id: this.selectedStatus,
                        technician: this.selectedTechnician
                    }).then(response => {
                        this.$message.success('工单分配成功');
                        this.dispatchWorkDialog = false;
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    }).catch(error => {
                        console.error('工单分配失败:', error);
                    }).finally(() => {
                        this.confirmLoading = false;
                    });
                },
                advanceProcess(process) {
                    alert('推进: ' + process.code);
                },
                moveBack(process) {
                    axios.post('/admin/work-order-move-back', {
                        work_order_id: process.id
                    }).then(response => {
                        this.$message.success('工单后退成功');
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    }).catch(error => {
                        console.error('工单分配失败:', error);
                    });
                },
                reworkProcess(process) {
                    console.log(process);
                    this.selectedTechnicianId = null;
                    this.selectedTechnician = null;
                    this.selectedStatus = null;
                    this.reworkSelectedStatus = null;
                    this.technicianData = null;
                    this.reworkRemark = '';
                    this.reworkDialog = true;
                    this.reworkDispatchId = null;
                    this.dispatchWorkInfo.order_id = process.id;
                    this.dispatchWorkInfo.order_sn = process.order_sn;
                    this.dispatchWorkInfo.car_number = process.car_number;
                    this.dispatchWorkInfo.car_title = process.car_title;
                    this.dispatchWorkInfo.user_name = process.user_name;
                    this.dispatchWorkInfo.dispatch_id = process.dispatch_id;
                    axios.post('/admin/order-processes-archives-all', {
                        work_order_id: this.dispatchWorkInfo.order_id
                    }).then(response => {
                        this.statusOptions = response.data.data;
                    }).catch(error => {
                        console.error('获取工序选项失败:', error);
                    });

                    axios.post('/admin/rework-all').then(response => {
                        this.reworkOptions = response.data.data;
                    }).catch(error => {
                        console.error('获取返工原因失败:', error);
                    });
                },
                // 确认技师选择
                reworkTechnicianSelection() {
                    if (!this.selectedTechnician || !this.selectedStatus) {
                        this.$message.warning('请选择技师和工序');
                        return;
                    }

                    if (!this.reworkSelectedStatus) {
                        this.$message.warning('请选择返工原因');
                        return;
                    }

                    if (!this.reworkRemark) {
                        this.$message.warning('请输入返工原因备注');
                        return;
                    }

                    this.confirmLoading = true;

                    axios.post('/admin/work-order-rework', {
                        work_order_id: this.dispatchWorkInfo.order_id,
                        old_dispatch_id: this.dispatchWorkInfo.dispatch_id,
                        processes_archive_id: this.selectedStatus,
                        rework_id: this.reworkSelectedStatus,
                        technician: this.selectedTechnician,
                        dispatch_id: this.reworkDispatchId,
                        content: this.reworkRemark
                    }).then(response => {
                        this.$message.success('工单返工成功');
                        this.dispatchWorkDialog = false;
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    }).catch(error => {
                        console.error('工单返工失败:', error);
                    }).finally(() => {
                        this.confirmLoading = false;
                    });
                },
                // 确认技师选择
                stopTechnicianSelection() {
                    if (!this.stopSelectedStatus) {
                        this.$message.warning('请选择中断原因');
                        return;
                    }

                    if (!this.stopRemark) {
                        this.$message.warning('请输入中断原因备注');
                        return;
                    }

                    this.confirmLoading = true;

                    axios.post('/admin/work-order-stop', {
                        work_order_id: this.dispatchWorkInfo.order_id,
                        stop_id: this.stopSelectedStatus,
                        content: this.stopRemark,
                        dispatch_id: this.dispatchWorkInfo.dispatch_id,
                    }).then(response => {
                        this.$message.success('工单中断成功');
                        this.dispatchWorkDialog = false;
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    }).catch(error => {
                        console.error('工单中断失败:', error);
                    });
                },
                stopContinue(process) {
                    axios.post('/admin/work-order-stop-continue', {
                        work_order_id: process.id,
                        dispatch_id: process.dispatch_id,
                    }).then(response => {
                        this.$message.success('工单继续成功');
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    }).catch(error => {
                        console.error('工单继续失败:', error);
                    });
                },
                completeSettlement(process) {
                    axios.post('/admin/work-order-settlement', {
                        work_order_id: process.id
                    }).then(response => {
                        this.$message.success('工单结算成功');
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    }).catch(error => {
                        console.error('工单结算失败:', error);
                    });
                },
                interruptProcess(process) {
                    this.selectedTechnicianId = null;
                    this.selectedTechnician = null;
                    this.selectedStatus = null;
                    this.stopSelectedStatus = null;
                    this.technicianData = null;
                    this.stopRemark = '';
                    this.stopDialog = true;
                    this.dispatchWorkInfo.order_id = process.id;
                    this.dispatchWorkInfo.order_sn = process.order_sn;
                    this.dispatchWorkInfo.car_number = process.car_number;
                    this.dispatchWorkInfo.car_title = process.car_title;
                    this.dispatchWorkInfo.user_name = process.user_name;
                    this.dispatchWorkInfo.dispatch_id = process.dispatch_id;
                    axios.post('/admin/stop-all').then(response => {
                        this.stopOptions = response.data.data;
                    }).catch(error => {
                        console.error('获取中断原因失败:', error);
                    });
                },
                search() {
                    window.location.href = "/admin?order_search="+this.searchQuery;
                },
                changeWorkshop() {
                    window.location.href = "/admin?selected_workshop="+this.selectedWorkshop;
                },
                showDialog(type) {
                    this.currentType = type;
                    this.dialogTitle = this.cards.find(btn => btn.type === type).title;
                    this.dialogVisible = true;
                    this.fetchData();
                },
                fetchData() {
                    this.loading = true;

                    // 这里替换为你的API请求
                    axios.get('/admin/work-order-list', {
                        params: {
                            type: this.currentType,
                            page: this.currentPage,
                            per_page: this.pageSize
                        }
                    }).then(response => {
                        const data = response.data;
                        this.tableData = data.data.map((item, index) => ({
                            ...item,
                            index: (this.currentPage - 1) * this.pageSize + index + 1
                        }));
                        this.total = data.total;
                        this.loading = false;
                    }).catch(error => {
                        console.error(error);
                        this.$message.error('获取数据失败');
                        this.loading = false;
                    });
                },
                handleSizeChange(val) {
                    this.pageSize = val;
                    this.fetchData();
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                    this.fetchData();
                },
                exportData() {
                    // 导出数据逻辑
//                    window.location.href = `/admin/api/vehicle-list/export?type=${this.currentType}`;
                },
                generateOrderNo() {
                    // 生成工单号逻辑
                    const date = new Date();
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
                    this.form.order_sn = `WO${year}${month}${day}${random}`;
                },
                searchManufacturers(query) {
                    if (query !== '') {
                        this.manufacturerLoading = true;
                        axios.get('/admin/brand-list', { params: { q: query } }).then(response => {
                            this.manufacturers = response.data;
                            this.manufacturerLoading = false;
                        }).catch(error => {
                            console.error(error);
                            this.manufacturerLoading = false;
                        });
                    } else {
                        this.manufacturers = [];
                    }
                },
                manufacturerChange (val) {
                    axios.get('/admin/car-list', {
                        params: {
                            q: '',
                            brand_id: val
                        }
                    }).then(response => {
                        this.carModels = response.data;
                    }).catch(error => {
                        console.error(error);
                    });
                },
                searchCarModels(query) {
                    if (query !== '' && this.form.brand_id) {
                        this.modelLoading = true;
                        axios.get('/admin/car-list', {
                            params: {
                                q: query,
                                brand_id: this.form.brand_id
                            }
                        }).then(response => {
                            this.carModels = response.data;
                            this.modelLoading = false;
                        }).catch(error => {
                            console.error(error);
                            this.modelLoading = false;
                        });
                    } else {
                        this.carModels = [];
                    }
                },
                showPartsDialog(type) {
                    this.currentPartsType = type;
                    this.partsDialogTitle = type === 'paint' ? '选择油漆部件' : '选择钣金部件';
                    this.partsDialogVisible = true;
                    this.selectedParts = [];
                    this.filteredParts = [];
                    // 重置选择区域
                    for (let key in this.selectedAreas) {
                        this.selectedAreas[key] = false;
                    }
                },
                showPartsDialog2(type) {
                    this.currentPartsType = type;
                    this.partsDialogTitle = type === 'paint' ? '选择油漆部件' : '选择钣金部件';
                    this.partsDialogVisible2 = true;
                    this.selectedParts2 = [];
                    this.filteredParts = [];
                    // 重置选择区域
                    for (let key in this.selectedAreas) {
                        this.selectedAreas[key] = false;
                    }
                },
                selectArea(area) {
                    // 取消之前的选择
                    if (this.currentSelected) {
                        this.selectedAreas[this.currentSelected] = false;
                    }

                    // 设置新的选择
                    this.selectedAreas[area] = true;
                    this.currentSelected = area;

                    // 触发change事件
                    this.$emit('area-change', area);
                    axios.get('/admin/component-maintenance-list', {
                        params: {
                            position_type: area,
                            type: this.currentPartsType
                        }
                    }).then(response => {
                        this.filteredParts = response.data;

                        const idMap = new Map();

                        if (this.currentPartsType == 'paint') {
                            this.form.paint_parts.forEach(item => {
                                if (item.component_maintenance_id) {
                                    item.id = item.component_maintenance_id;
                                }
                                idMap.set(item.id, item);
                            });
                        } else {
                            this.form.sheet_metal_parts.forEach(item => {
                                if (item.component_maintenance_id) {
                                    item.id = item.component_maintenance_id;
                                }
                                idMap.set(item.id, item);
                            });
                        }

                        this.$nextTick(() => {
                            if (!this.$refs.partsTable) return;

                            this.$refs.partsTable.clearSelection();

                            this.filteredParts.forEach(row => {
                                if (idMap.has(row.id)) {
                                    this.$refs.partsTable.toggleRowSelection(row, true);
                                }
                            });
                        });
                    }).catch(error => {
                        console.error(error);
                        this.$message.error('获取部件列表失败');
                    });
                },
                selectArea2(area) {
                    // 取消之前的选择
                    if (this.currentSelected) {
                        this.selectedAreas[this.currentSelected] = false;
                    }

                    // 设置新的选择
                    this.selectedAreas[area] = true;
                    this.currentSelected = area;

                    // 触发change事件
                    this.$emit('area-change', area);
                    axios.get('/admin/component-maintenance-list', {
                        params: {
                            position_type: area,
                            type: this.currentPartsType
                        }
                    }).then(response => {
                        this.filteredParts = response.data;

                        const idMap = new Map();

                        if (this.currentPartsType == 'paint') {
                            this.form2.paint_parts.forEach(item => {
                                if (item.component_maintenance_id) {
                                    item.id = item.component_maintenance_id;
                                }
                                idMap.set(item.id, item);
                            });
                        } else {
                            this.form2.sheet_metal_parts.forEach(item => {
                                if (item.component_maintenance_id) {
                                    item.id = item.component_maintenance_id;
                                }
                                idMap.set(item.id, item);
                            });
                        }

                        this.$nextTick(() => {
                            if (!this.$refs.partsTable) return;

                            this.$refs.partsTable.clearSelection();

                            this.filteredParts.forEach(row => {
                                if (idMap.has(row.id)) {
                                    this.$refs.partsTable.toggleRowSelection(row, true);
                                }
                            });
                        });
                    }).catch(error => {
                        console.error(error);
                        this.$message.error('获取部件列表失败');
                    });
                },
                handleAreaCheck(area) {
                    if (this.selectedAreas[area]) {
                        this.selectArea(area);
                    } else if (this.currentSelected === area) {
                        this.currentSelected = null;
                    }
                },
                handleAreaCheck2(area) {
                    if (this.selectedAreas[area]) {
                        this.selectArea2(area);
                    } else if (this.currentSelected === area) {
                        this.currentSelected = null;
                    }
                },
                handlePartsSelectionChange(val) {
                    this.selectedParts = val;
                },
                handlePartsSelectionChange2(val) {
                    this.selectedParts2 = val;
                },
                confirmParts() {
                    if (this.selectedParts.length === 0) {
                        this.$message.warning('请至少选择一个部件');
                        return;
                    }

                    // 根据损伤程度计算各项数值
                    const processedParts = this.selectedParts.map(part => {
                        const newPart = { ...part };
                        this.calculatePartValues(newPart);
                        return newPart;
                    });

                    if (this.currentPartsType === 'paint') {
                        const partsMap  = new Map();

                        this.form.paint_parts.forEach(part => partsMap.set(part.id, part));

                        processedParts.forEach(part => partsMap.set(part.id, part));
                        this.form.paint_parts = Array.from(partsMap.values());

                        this.paintTotal =  this.calculateTotal(this.form.paint_parts);
                    } else {
                        const partsMap  = new Map();
                        this.form.sheet_metal_parts.forEach(part => partsMap.set(part.id, part));

                        processedParts.forEach(part => partsMap.set(part.id, part));
                        this.form.sheet_metal_parts = Array.from(partsMap.values());
                        this.sheetMetalTotal = this.calculateTotal(this.form.sheet_metal_parts);
                    }

                    this.partsDialogVisible = false;
                },
                confirmParts2() {
                    if (this.selectedParts2.length === 0) {
                        this.$message.warning('请至少选择一个部件');
                        return;
                    }

                    // 根据损伤程度计算各项数值
                    const processedParts = this.selectedParts2.map(part => {
                        const newPart = { ...part };
                        this.calculatePartValues(newPart);
                        return newPart;
                    });

                    if (this.currentPartsType === 'paint') {
                        const partsMap  = new Map();

                        this.form2.paint_parts.forEach(part => partsMap.set(part.id, part));

                        processedParts.forEach(part => partsMap.set(part.id, part));
                        this.form2.paint_parts = Array.from(partsMap.values());

                        this.paintTotal2 =  this.calculateTotal(this.form2.paint_parts);
                    } else {
                        const partsMap  = new Map();
                        this.form2.sheet_metal_parts.forEach(part => partsMap.set(part.id, part));

                        processedParts.forEach(part => partsMap.set(part.id, part));
                        this.form2.sheet_metal_parts = Array.from(partsMap.values());
                        this.sheetMetalTotal2 = this.calculateTotal(this.form2.sheet_metal_parts);
                    }

                    this.partsDialogVisible2 = false;
                },
                calculatePartValues(part) {
                    // 根据损伤程度计算各项数值
//                    part.ratio = 1;
//                    part.paint_standard_hours = part.base_paint_hours * 1;
//                    part.paint_performance_hours = part.base_paint_hours * 1 * 1.2;
//                    part.metal_standard_hours = part.base_metal_hours * 1;
//                    part.metal_performance_hours = part.base_metal_hours *1 * 1.2;
//                    part.standard_parts = 1;
//                    part.performance_parts = 1;
                },
                calculatePaintPart(part) {
                    this.calculatePartValues(part);
                },
                calculateSheetMetalPart(part) {
                    this.calculatePartValues(part);
                },
                removePaintPart(index) {
                    this.form.paint_parts.splice(index, 1);
                },
                removeSheetMetalPart(index) {
                    this.form.sheet_metal_parts.splice(index, 1);
                },
                removePaintPart2(index, row) {
                    this.form2.paint_parts.splice(index, 1);
                    if (row.work_order_id) {
                        axios.post('/admin/work-order-component-delete', row).then(response => {
                        }).catch(error => {
                            console.error(error);
                            this.$message.error('部件移除失败');
                        });
                    }
                },
                removeSheetMetalPart2(index) {
                    this.form2.sheet_metal_parts.splice(index, 1);
                },
                calculateTotal(parts) {
                    const total = {
                        standard_hours: 0,
                        performance_hours: 0,
                        standard_parts: 0,
                        performance_parts: 0
                    };

                    parts.forEach(part => {
                        total.standard_hours += parseFloat(part.standard_working_base) || 0;
                        total.performance_hours += parseFloat(part.performance_working_base) || 0;
                        total.standard_parts += parseFloat(part.standard_quantity_base) || 0;
                        total.performance_parts += parseFloat(part.performance_quantity_base) || 0;
                    });

                    // 保留两位小数
                    for (let key in total) {
                        total[key] = total[key].toFixed(2);
                    }

                    return total;
                },
                submitForm() {
                    // 表单验证
                    if (!this.form.car_number) {
                        this.$message.error('请输入车牌号');
                        return;
                    }

                    if (!this.form.brand_id) {
                        this.$message.error('请选择制造厂商');
                        return;
                    }

                    if (!this.form.pre_delivery_at) {
                        this.$message.error('请选择预交时间');
                        return;
                    }

                    // 提交数据
                    axios.post('/admin/work-order-create', this.form).then(response => {
                        this.$message.success('工单创建成功');
                        this.showCreateDialog = false;
                        setTimeout(() => {
                            window.location.reload();
                        }, 1500);
                    }).catch(error => {
                        console.error(error);
                        this.$message.error('工单创建失败');
                    });
                },
                submitForm2() {
                    // 提交数据
                    axios.post('/admin/work-order-update', this.form2).then(response => {
                        this.$message.success('工单修改成功');
                        this.showCreateDialog2 = false;
                    }).catch(error => {
                        console.error(error);
                        this.$message.error('工单编辑失败');
                    });
                },
                // 删除工单
                handleDelete() {
                    this.$confirm('确定要删除当前工单吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post('/admin/work-order-delete', this.form2).then(response => {
                            this.$message.success('工单删除成功');
                            this.showCreateDialo2g = false;
                            setTimeout(() => {
                                window.location.reload();
                            }, 1500);
                        }).catch(error => {
                            console.error(error);
                            this.$message.error('工单删除失败');
                        });

                    });
                },
                handleClose(done) {
                    this.$confirm('确认关闭？未保存的数据将会丢失', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        done();
                    }).catch(() => {});
                }
            }
        });
    }
</script>
